<%--
  Created by IntelliJ IDEA.
  User: Edward_yang
  Date: 2017/12/13 0013
  Time: 10:43
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/commons/global.jsp" %>
<html>
<head>
    <%@ include file="/commons/basejs.jsp" %>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>属性管理</title>
    <script type="text/javascript">
        function formatterImg(value){
            if(value!=null){
                return '<img height="40px"  src="'+value+'" alt="" />';
            }else{
                return '';
            }
        }
    </script>
</head>
<body>
<div class="easyui-layout" fit="true" >
    <!--west分类列表start-->
    <div data-options="region:'west',split:true,border:false" title="分类列表" style="width:35%;">
        <table id="classify_datagrid" class="easyui-treegrid"
               data-options="
		   		url:'${path }/category/treeGrid.do',
		   		fit:true,
		   		idField:'id',
		   		treeField:'name',
		   		parentField : 'parentId',
		   		rownumbers:true,
		   		fitColumns: true,
		   		toolbar:'#classify_tools',
		   		pagination:true,
		   		singleSelect:true,
		   		onClickRow:function(node){
		   			getLabels(node.id);
		   		}">
            <thead>
            <th data-options="field:'id'">ID</th>
            <th data-options="field:'name',width:100">分类名称</th>
            <th data-options="field:'logo',width:200,formatter:formatterImg">分类logo</th>
            <th data-options="field:'status',width:100,formatter:function(value){
                if(value) return '是';return '否';}">是否启用</th>
            <th data-options="field:'ord',width:100">分类排序</th>
            </thead>
        </table>
        <div id="classify_tools">
            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-reload'" onclick="$('#classify_datagrid').treegrid('reload') ">刷新</a>
        </div>
    </div>
    <!--end-->
    <script>
        //联动处理classifyID处理Label
        function getLabels(classifyID) {
          $("#attribute_datagrid").datagrid('clearSelections');
            var queryParams = {};
            queryParams.one_category_id = classifyID;
            var options = $("#attribute_datagrid").datagrid('getPager').data("pagination").options;
            options.pageNumber = 1;
            //重新加载
            $("#attribute_datagrid").datagrid('options').url = "${path}/attribute/attributeList.do";
            $("#attribute_datagrid").datagrid('options').queryParams = queryParams;
            $("#attribute_datagrid").datagrid('reload');
        }
    </script>
    <!--center属性列表start-->
    <div data-options="region:'center',split:true,border:false" title="属性列表" style="width:65%;">
        <table id="attribute_datagrid" class="easyui-datagrid"
               data-options="
		   		url:'${path}/attribute/attributeList.do',
		   		fit:true,
		   		rownumbers:true,
		   		fitColumns: true,
		   		toolbar:'#attribute_tools',
		   		pagination:true,
		   		singleSelect:true,
		   		">
            <thead>
            <th data-options="field:'id'">ID</th>
            <th data-options="field:'name',width:100">产品属性名称</th>
            <th data-options="field:'code',width:100">产品属性名称</th>
            <th data-options="field:'logo',width:340,formatter:formatterImg">产品属性logo</th>
            <th data-options="field:'ord',width:50">产品属性排序</th>
            </thead>
        </table>
        <div id="attribute_tools">
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-reload'" onclick="$('#attribute_datagrid').datagrid('reload') ">刷新</a>

        <shiro:hasPermission name="/attribute/add.do">
            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'" onclick="openEditAttributeBox('add')">添加</a>
        </shiro:hasPermission>
        <shiro:hasPermission name="/attribute/edit.do">
            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit'" onclick="openEditAttributeBox('update')">修改</a>
        </shiro:hasPermission>
        <shiro:hasPermission name="/attribute/delete.do">
            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove'" onclick="deleteAttribute()" >删除</a>
        </shiro:hasPermission>

        <label>关键词:</label>
        <input class="easyui-searchbox" data-options="prompt:'请输入属性名称/编号',searcher:doattributeSearch" style="width:220px;"/>
    </div>
        <!--添加属性弹窗-->
        <style type="text/css">

            .grid{font:12px arial,helvetica,sans-serif;border:0px solid #8DB2E3}
            .grid td{font:100% arial,helvetica,sans-serif;height:40px;padding:5px}
            .grid{width:100%;border-collapse:collapse}
            .grid td{border:1px solid #e0e0e0;padding-left:5px}
        </style>
        <div class="easyui-dialog" id="edit_attribute_dialog" title="添加属性" data-options="closed:true,modal:true,width:500,height:450">
            <form id="edit_attribute_form" method="post">
                <table class="grid" align="center" style="margin-top: 40px">
                    <input type="hidden" name="id" id="edit-id-input" />
                    <tr>
                        <td><lable for="name">属性名称:</lable></td>
                        <td>
                            <input class="easyui-validatebox" name="name" data-options="required:true" style="width:200px;"/>
                        </td>
                        <td> 图片预览:</td>
                    </tr>
                    <tr >
                        <td><lable for="code">属性编号:</lable></td>
                        <td>
                            <input class="easyui-validatebox" name="code" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')" data-options="required:true" style="width:200px;"/>
                        </td>
                        <td rowspan="2"><img height="60px" src="" id="tpyl"/></td>

                    </tr>
                    <tr >
                        <td><lable for="ord">属性排序:</lable></td>
                        <td>
                            <input class="easyui-validatebox" name="ord" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')" data-options="required:true" style="width:200px;"/>
                        </td>

                    </tr>
                    <tr >
                        <td> <div id="upload"></div>
                            属性logo</td>
                        <td><input class="easyui-validatebox" readonly="readonly" type="text" id="logo"    name="logo" style="width:200px;"/></td>
                        <td><a href="javascript:void(0);"  class="easyui-linkbutton" data-options="iconCls:'icon-edit'" onclick="upImage();">上传图片</a></td>
                        <script type="text/javascript">

                            var _editor;
                            $(function() {
                                //重新实例化一个编辑器，防止在上面的editor编辑器中显示上传的图片或者文件
                                _editor = UE.getEditor('upload',{
                                    serverUrl:"${path}/file/upload.do?compress=1"
                                });

                                _editor.ready(function () {
                                    //设置编辑器不可用
                                    // _editor.setDisabled();
                                    //隐藏编辑器，因为不会用到这个编辑器实例，所以要隐藏
                                    _editor.hide();
                                    //侦听图片上传
                                    _editor.addListener('beforeInsertImage', function (t, arg) {
                                        //有多少张图片arg.length就是多大
                                        $("#logo").val(arg[0].src);
                                        $("#tpyl").attr("src",arg[0].src);

                                    });
                                });
                            });
                            //弹出图片上传的对话框
                            function upImage() {
                                var myImage = _editor.getDialog("insertimage");
                                myImage.open();
                            }
                        </script>
                    </tr>
                    <tr>
                        <td><lable for="type">分类类型:</lable></td>
                        <td><select id="classify_id" class="easyui-combobox" data-options="panelHeight:'auto',required:true" name="oneCategoryId" style="width:205px;" />
                            </select>
                        </td>
                        <td rowspan="2"></td>
                    </tr>

                </table>
                <div style="margin-top:40px;text-align: center">
                    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'" onclick="editAttribute()">保存</a>
                    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" onclick="$('#edit_attribute_dialog').dialog('close')">取消</a>
                </div>
            </form>
        </div>
    </div>
    <!--end-->
    <script>
        var flag="add"
        //查询
        function doattributeSearch(val) {
            var queryParams = {};
            if(val.length > 0){
                queryParams.keyWord = val;
            }
            var options = $("#attribute_datagrid").datagrid('getPager').data("pagination").options;
            options.pageNumber = 1;
            //重新加载
            $("#attribute_datagrid").datagrid('options').url = "${path}/attribute/attributeList.do";
            $("#attribute_datagrid").datagrid('options').queryParams = queryParams;
            $("#attribute_datagrid").datagrid('reload');
        }
        //打开弹层
    function openEditAttributeBox(str) {
        $("#edit_attribute_form").form("clear");
        $('#classify_id').combotree({
            url : '${path }/category/allTree.do',
            parentField : 'pid',
            lines : true,
            panelHeight : 'auto',
            value : '${category.parentId}'
        });

        if(str == "update"){
            flag=str;
            var select = $("#attribute_datagrid").datagrid("getSelected");
            if(select == null){
                $.messager.alert("提示","请选择一个标签","info");
                return;
            }
            $("#edit_attribute_dialog").dialog({title: "修改标签"});
            $("#edit_attribute_form").form("load",select);
            $("#tpyl").attr("src",select.logo);
        }else{
            flag=str;

        }
        $("#edit_attribute_dialog").dialog("open");
    }
    //保存修改
    function editAttribute() {
        $.messager.progress();
        var url = "";
        var str = "";
        if(flag == 'add'){
            url = "${path}/attribute/add.do";
            str = "添加";
        }else if(flag == 'update'){
            url = "${path}/attribute/edit.do";
            str = "修改";
        }
        $("#edit_attribute_form").form("submit",{
            url:url,
            onSubmit:function(){
                var valid = $(this).form("validate");
                if (!valid) {
                    $.messager.progress("close");
                }
                return valid;
            },
            success:function(data){
                data=$.parseJSON(data);
                $.messager.progress("close");
                if(data.success){
                    $("#edit_attribute_dialog").dialog("close");
                    $.messager.show({
                        title:str +"成功",msg:str +"成功!",
                        timeout:600,style:"left:30%;top:10%",
                        showType:"fade"
                    });
                    $("#attribute_datagrid").datagrid("reload");
                }else{
                    $.messager.alert(str +"失败", data.msg,"error");
                }
            }
        });
    }
    function deleteAttribute() {
        var select = $("#attribute_datagrid").datagrid("getSelected");
        if(select == null){
            $.messager.alert("提示","请选择一个属性","info");
            return;
        }
        $.messager.confirm("确认","确定要删除该属性吗?\n确定删除将连同配置信息一同删除",function(yes){
            if(yes){
                commonDelete("${path}/attribute/delete.do",select.id,"attribute_datagrid")
            }
        });
    }
        //删除公共调用方法
        function commonDelete(url,id,datagrid){
            $.messager.progress();
            $.ajax({
                url:url,
                type:"post",
                data:{id : id},
                dataType:"json",
                success:function(data){
                    $.messager.progress("close");
                    if(data.success){
                        $.messager.show({
                            title:"删除成功",
                            msg:"删除成功!",
                            timeout:600,
                            style:"left:30%;top:10%",
                            showType:"fade"
                        });
                        $("#"+datagrid).datagrid("reload");
                        $("#"+datagrid).datagrid('clearSelections');
                    }else{
                        $.messager.alert("删除失败", data.msg,"error");
                    }
                },
                error:function(){
                    $.messager.progress("close");
                    $.messager.alert("删除失败", "服务器连接失败!","error");
                }
            });
        }
    </script>
</div>
</body>
</html>
